@charset "UTF-8";
@import "reset";
@import "common";
.web {
    header {
        width: vw(706px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: vw(16px) 0 vw(10px);
        .top_box {
            width: vw(120px);
            height: vw(40px);
            text-align: center;
            line-height: vw(40px);
            border-radius: vw(16px);
            border: 2px solid $index_color;
        }
        .city_box {
            width: vw(166px);
            height:vw(55px) ;
            line-height:vw(50px) ;
            border: vw(3px) solid $index-color;
            box-sizing: border-box;
            padding-left:vw(14px);
            position:relative;
            select {
                width:90%;
                height: 80%;
                border:0;
                outline: none;
                -webkit-appearance: none;
                font-size: vw(26px);
            }
            &::after {
                content: "";
                border-left:vw(10px)solid transparent ;
                border-right:vw(10px) solid transparent ;
                border-top:vw(10px) solid $index-color ;
                border-bottom:vw(10px) solid transparent ;
                position: absolute;
                top: 50%;
                right: vw(20px);
                transform: translateY(-25%);
            }
            }
    }
    section {
        position: absolute;
        left: 0;
        width: 100%;
        top: vw(70px);
        bottom: vw(135px);
        overflow-y: auto;
    }
    .search_box {
//          position:relative;
            width:vw(270px) ;
            height:vw(55px);
            box-sizing: border-box;
            border:vw(3px) solid $index-color;
            border-radius: vw(27px);
            margin: 0 auto;
            margin-top: vw(40px);
            margin-bottom: vw(40px);
//          overflow: hidden;
            form {
                width:100%;
                height: 100%;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-start;
                align-items:center;
                padding:0 vw(20px) 0 vw(30px);
                input {
                    width: vw(180px);
                    border: 0;
                    height: vw(46px);
                    font-size: vw(24px);
                    outline: none;
                }
                button {
                    background: #FFFFFF;
                    border:0;
                    width: vw(38px);
                    height: vw(38px);
                    font-size: vw(36px);
                    color: $index-color;
                    outline: none;
                }
                
            
            }
            
        }
        p.sou{
            text-align: center;
            font-size: vw(26px);
            margin-bottom: vw(20px);
        }
        .gjc {
        width: 70%;
        height: vw(130px);
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        .gjc_box {
            width: vw(125px);
            height: vw(60px);
            background-color: #dcdcdc;
            margin-bottom: vw(7px);
            text-align: center;
            padding-top:vw(25px) ;
            font-size: vw(28px);
            color: #8f8f8f;
            }
        }
    
        .hot {
        width: 90%;
        display: flex;
        margin: 0 auto;
        margin-top: vw(90px);
        justify-content: space-between;
        .hot_left {
            justify-content: flex-start;
            i {
                color: $index_color;
                font-size: vw(48px);
            }
            span {
                font-size: vw(38px);
            }
        }
        .hot_right {
            justify-content: flex-end;
            i {
                color: $index_color;
                font-size: vw(38px);
            }
            p {
                font-size: vw(38px);
            }
        }
    }
    .hot_box{
        width: 90%;
        height: vw(350px);
        
        margin: 0 auto;
        .box1{
        width: 43%;
        
        img{
            width: 100%;
            height: 70%;
        }
    }
    .box2{
        width: 52%;
        
        
        img{
            width: 100%;
            height: 25%;
        }
    }
    .box3{
        width: 25%;
       
        img{
            width: 100%;
            height: vw(200px)
        }
    }
    .box4{
        width: 25%;
         margin-right: vw(15px);
        img{
            width: 100%;
            height: vw(200px);
        }
    }
    }
    
}